<template>
  <div>
    <h1>App:{{ aa }}</h1>
    <button @click="show">show</button>
    <hr />
    <Header />
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

/* 
  defineComponent():
    - 在定义vue组件时提供类型推导的辅助函数
    - 第一个参数是一个组件选项对象
    - 返回值是该选项对象本身,因为该函数实际上在运行时没有任何操作,仅用于提供类型推导
*/
export default defineComponent({
  name: "App",
  /* 
  setup选项:
    - setup函数是一个新的组件选项,所有的组合API函数都在此使用,作为在组件内使用Component API的入口点,只在初始化时执行一次
    - 本质上是beforeCreate和created两个生命周期函数的合并,无法使用this
    - setup函数中返回的对象中的属性都会放在组件的实例上,模版还是和vue2一样,都在实例上去拿数据
    - 在setup中是没有this的
  */
});
</script>


<script  setup lang="ts">
import Header from "./components/Header.vue";
let aa = 1;
const show = () => {
  console.log("show hello");
};
</script>


<style  scoped >
</style> 